@import blueprint.sass
@import blueprint/modules/scaffolding.sass
@import compass/reset.sass

// Trying out some of these optional modules that provide handy mixins
@import compass/utilities/general/inline_block.sass
@import compass/utilities/lists.sass
@import compass/utilities/links.sass

+blueprint
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
+blueprint-scaffolding


// Shared colour constants
!default_border_color = #DDD
!link_hover_color = #eee
!lighter_text_color = #666
!medium_blue = #2E6AB1
!lightest_blue = #BBDAFD
!light_blue = #E5F2F8
!dark_blue = #162F54
!light_green = #92D363
!selling_price_color = !medium_blue

// Custom mixins
= no_margin_or_padding
  :margin 0
  :padding 0


body
  :margin-top 10px
  :background #fff url(/images/body-back.png) top left repeat-x
  div.left
    :float left
    :width 49%
  div.right
    :float right
    :width 49%
    :text-align right
  a
    :outline none

.container 
//  :background url(/images/grid.png)

#wrapper
  :background transparent url(/images/wrapper-back.png) top center no-repeat
  :padding 25px 20px 20px
  :position relative
  body.two-col &
    :background-image url(/images/wrapper-back-2.png) 
  
// Main Layout
#sidebar 
  +column(4)
  +colborder
  h3
    :margin-bottom .5em

#content
  body.one-col &
    +column(24,"last")
  body.two-col &
    +column(19,"last")

#header
  :position relative
  :color = !medium_blue
  :clear both
  a
    :color = !medium_blue
    &:hover
      :color = !light_blue
#footer
  :padding-top 2em
  :clear both
  
h1
  :font-size 2.5em


// Navigation

.navigation-list
  +no-bullets
  :margin 0 0 1.5em -15px
  li
    :margin 0
    a
      :cursor pointer!important
      :text-decoration none
      :color #333
      :display block
      :line-height 2.5em
      :padding-left 20px
    a:hover
      :width 170px
      :background url(/images/menu-hover.png) right center no-repeat
  li.current
    :width 200px
    a
      :background url(/images/menu-current.png) right center no-repeat
    a:hover
      :width 180px
        
.breadcrumbs
  :margin-bottom 1em
  ul
    +inline-list
    :overflow auto
    :margin 0
    :padding 0
    li
      :line-height 20px
      :color #666
      a,span
        :text-decoration none
        :padding 5px 7px
        :color #666
      span
        :color #333

div#login-bar
  :display inline
  
ul#language-bar
  +inline-list
  strong
    :font-weight normal
ul#nav-bar
  :line-height 50px
  :float right
  :clear both
  :font-size 1.2em
  :list-style none
  :margin 0
  :padding 0
  li
    :float left
    :margin-left 1em
    &.cart-indicator
      a
        :display block
        :padding-right 40px
        :background transparent url(/images/cart-empty_x32.png) center right no-repeat
        &.full
          :background-image url(/images/cart-full_x32.png)

.pagination
  :padding-top 10px
  :text-align right
  a.page, span.page   
    :padding 0px 5px 
    :margin 0 3px
  a.page   	  
    :text-decoration none  
    :border 1px solid #9aafe5
    :color #2e6ab1	
    &:hover, &:active   
      :border 1px solid #2b66a5
      :color #000
  a.next_page 
    :font-weight bold
  span.disabled_page   
    :border 1px solid #929292
    :color #929292
  span.current_page   
    :font-weight bold
    :border 1px solid
    :border-color = !dark_blue
    :background-color = !medium_blue
    :color #FFF


// Product thumbnail grids
.product-listing
  :margin 2em 0 0 0
  :padding 0
  +no-bullets
  li
    :left 200px
    :height 180px
    :width 140px
    :text-align center
    :float left
    :margin 1em
    :padding 10px
    :border 1px solid #ddd
    :position relative
    :-moz-border-radius 3px
    :-webkit-border-radius 3px
    a
      :display block
      :text-decoration none
      :color #111
    a.info
      :position absolute
      :bottom 0px
      :right 0em
      :padding 5px 
      :width 150px
      :min-height 60px
      :background #fff url(/images/shadow_top.png) 0px -35px repeat-x
      :border-top 1px solid #fff
      span
        :display block
    &.last
      :margin-right 0
    &:hover
      :border-color #1b1b1b
      a.info
        :background #1b1b1b url(/images/bottom_shine.png) bottom left repeat-x
        :color #fff
ul#product-thumbnails
  :margin 0
  :padding 0
  :list-style none
  li
    :float left
    :margin-right 5px
    :padding 3px
    :border 1px solid #fff
    &:hover
      :border-color #ccc
    &.selected
      :border-color #999

// Product details
#product-variants
  :margin-bottom 1em
  ul
    +no-bullets
    +no_margin_or_padding
#product-images
  +column(7)
#product-description
  +column(8)
  +colborder
#cart-form
  +column(7,"last")
  button.large
    :margin-bottom 0px
  
// Prices
.prices
  :font-weight bold
  #product-details &
    :font-size 1.25em
.price
  &.selling
    :color = !selling_price_color
    #product-details &
      :font-size 1.5em
.price.diff
  :font-style italic
  :font-weight normal
  :color = !lighter_text_color

// cart
#subtotal
  :float right

#signup #new-customer, #login #existing-customer
  +column(12)
  h2
    :margin-bottom .25em
  p
    :margin-bottom 10px
    input.title
      :padding 3px
      :margin 0px

// Errors
.formError, .errorExplanation
  :font-size 1.3em
  :margin-bottom 1em
  :padding 0.8em
  :-moz-border-radius 5px
  :-webkit-border-radius 5px
  :background #F4B4B4 url(/images/shadow_top.png) repeat-x scroll 0pt -50px
  :border 1px solid #000
  :color #000
  p
    :margin 0px
  ul
    :margin-bottom 0px
  h2
    :font-weight bold
    :font-size 1.0em
    :margin 0px

.fieldWithErrors
  :clear none

div#checkout
  div#registration div.error, div#shipping_method div.error
    :width 815px
    :-moz-border-radius 5px
    :-webkit-border-radius 5px
  div#billing input, div#shipping input, div#payment input, div#registration_input input
    :border 1px solid #BBB
  div.inner
    :display none
    :padding 10px 2px
  h2
    :margin-bottom 0.25em
  select.error, input.error
    :padding 0px
    :background #FFF
    :border 1px solid #EAE8E3
  p
    :clear both
    :margin-bottom 15px
    label
      :float left
      :width 150px
      :position relative
      :top 5px
    span.req
      :color red
      :margin-left 2px
      :position relative
      :top -3px
    input, select
      :margin-left 150px
      :width 200px
      :margin 0px
    label.error
      :color red
      :clear both
      :margin 0px 0px 5px 150px
      :top 0px
      :font-size 11px
      :border none
      :padding 0px
      :background #FFF
  label.radio
    :display inline
  div#methods p, div#registration_choice p
    :margin-bottom 7px 
    input, label
      :display inline
      :float none
    label
      :margin 0px 0px 0px 5px 
      :top -1px
      :width 300px
    input
      :width 15px
  #registration
    :background transparent url(/images/steps/1.png) top right no-repeat
    &.completed,&.disabled
      :background-image none
      h2
        :background transparent url(/images/steps/1_small.png) top left no-repeat
    div#registration_choice
      :float left
      :block none
      :margin-bottom 1em
    div#registration_input
      :float left
      :margin-left 100px
    div#guest_user, div#existing_user
      :display none
    div#already_logged_in
      :display none
  #billing
    :background transparent url(/images/steps/2.png) top right no-repeat
    &.completed,&.disabled
      :background-image none
      h2
        :background transparent url(/images/steps/2_small.png) top left no-repeat
  #shipping
    label#use_billing
      :top -3px
    input#checkout_same_address
      :border none
      :width 12px
    :background transparent url(/images/steps/3.png) top right no-repeat
    &.completed,&.disabled
      :background-image none
      h2
        :background transparent url(/images/steps/3_small.png) top left no-repeat
        :padding-left 32px
  #shipping_method
    div.inner
      :padding-top 0px
    :background transparent url(/images/steps/4.png) top right no-repeat
    &.completed,&.disabled
      :background-image none
      h2
        :background transparent url(/images/steps/4_small.png) top left no-repeat
    div.error
      :display none
  #payment
    :background transparent url(/images/steps/5.png) top right no-repeat
    &.completed,&.disabled
      :background-image none
      h2
        :background transparent url(/images/steps/5_small.png) top left no-repeat
    p select
      :width 75px
  #confirmation
    :background transparent url(/images/steps/6.png) top right no-repeat
    &.completed,&.disabled
      :background-image none
      h2
        :background transparent url(/images/steps/6_small.png) top left no-repeat
    table.order-summary
      .price, .qty
        :width 165px
      .total_display
        :width 300px
        span
          :display block
          :text-align right
          :padding-right 150px
    div#bdisplay, div#sdisplay
      :float left
      :width 300px
      :clear right
  .checkout
    &.disabled, &.completed
      h2
        :padding-left 32px
        :color #AFAFAF
        :font-size 1.4em
        :padding-bottom 10px
        :border-bottom 1px solid #ddd
      &:last-child
        h2
          :border-bottom none
    &.completed
      h2
        :color #111
        :border-color #999
  input#continue_billing, input#continue_shipping
    :cursor pointer
    :width 100px
    :display block
    :clear both
    :margin-top 10px
  p input#continue_registration, p input#continue_shipping_method,  p input#continue_payment,  #confirm_order .inner input
    :cursor pointer
    :width 100px

.form-buttons
  :clear both
.clear
  :clear both

button,
a.button,input.button
  :background #efefef url(/images/buttons/bg-button.png) center left repeat-x !important
  :border-style solid 
  :border-width 1px !important
  :border-color #ddd #999 #999 #ddd !important
  :-moz-border-radius .3em
  :-webkit-border-radius .3em
  :-moz-outline-radius .3em
  :color #111
  :display inline-block
  :font-family Helvetica Neue, Helvetica, Arial, Sans-serif
  :font-size 1.1em !important
  :font-size-adjust none
  :font-stretch normal
  :font-style normal
  :font-variant normal
  :font-weight normal
  :line-height 1.2em
  :margin 0
  :overflow visible
  :padding 10px 17px
  :text-decoration none
  :text-transform lowercase
  :width auto
  :height auto
  :cursor pointer
  &.primary
    :font-weight bold
    :color #000
  &:hover
    :background-image url(/images/buttons/bg-button-hover.png) !important
    //:outline solid 2px #cdf
  &.large
    :font-size 1.4em !important
    :line-height 1.4em
    :-moz-border-radius 5px
    :-webkit-border-radius 5px
  &.small
    :font-size .9em
    :line-height 1.4em
    :padding 5px 10px
    :-moz-border-radius 4px
    :-webkit-border-radius 4px
    img
      :margin 0 3px 0 0 !important
  &.update,
  &.checkout
    img
      :margin-right 7px
  img
    :vertical-align middle
input.title
  :width auto
  
p
  a.button, button
    img
      margin: 0 5px 0 0

  &.follow-all
    :font-size 1.3em
    :text-align center
    :display block
      
  img
    :float left
    :margin-right 5px
    :vertical-align middle
a.button
  &:focus
    :outline none
  &:active
    //:background-image url(/images/buttons/bg-button-pressed.png)
    //:border-color #999 #ddd #ddd #999
// hack for firefox jacking my buttons
button 
  &::-moz-focus-inner
    :padding 0
    :border none

table
  :border-collapse collapse
  th
    :background transparent
    :padding 10px
    :border-bottom 1px solid #ddd
  &#cart
    tr
      td
        :border-bottom 1px solid #ddd
        :padding 1em 0
      &#none
        td
          :border-bottom none
    h4
      :margin-bottom 0em
.flash
  :-moz-border-radius 5px
  :-webkit-border-radius 5px
  &.notice,&.errors
    :font-size 1.3em
    :margin-bottom 1em
    :padding 0.8em
  &.notice
    :background #cdf url(/images/shadow_top.png) 0 -50px repeat-x
    :color #569
    :border 1px solid #9ac
  &.errors
    :color #000
    :background #F4B4B4 url(/images/shadow_top.png) 0 -50px repeat-x
    :border 1px solid #000
